<template>
  <div id="views">
    <div class="content">
      <p class="title">币种选择</p>
      <p v-for="(item,index) in coins" class="link">
        <router-link :to="{path:'/out_coins',query:{ coin : item.coin , name:item.name }}">
          <img :src="item.img" alt="币种" class="logo">
          {{item.name}}
          <img src="../../common/imgs/arrowright.png" alt="箭头" class="right">
        </router-link>
      </p>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'out_coins',
    data() {
      return {
          introduce : '提币-选择币种',
          coins:[
            { coin : 'BTC' , name : 'BTC' , img : require('../../common/imgs/iconsc.png') },
            { coin : 'ETH' , name : 'ETH', img : require('../../common/imgs/iconse.png')  },
            { coin : 'LTC' , name : 'LTC', img : require('../../common/imgs/coins_ltc.png')  },
            { coin : 'bhp' , name : 'BHP交易账户', img : require('../../common/imgs/iconsh.png')  },
            // { coin : 'bhpc_price' , name : 'BHP分红账户' , img : require('../../common/imgs/iconsa.png') },
            { coin : 'USDT' , name : 'USDT' , img : require('../../common/imgs/iconsd.png') },
          ]
      }
    },
  }
</script>

<style type="text/less" lang="less" scoped>
  #views{

    padding: 0.26rem 0.3rem;height: 100%;
    .title{
      font-size: 0.28rem;padding:0.3rem 0;font-size: ;
    }
   .content{
     background: #fff;min-height: 100%;padding: 0.3rem 0.26rem;padding-top: 0;
     >.link{
       padding:0.27rem 0;border-bottom: 0.01rem solid#eee;line-height: 0.49rem;overflow: hidden;
       a{
         line-height: 0.49rem;display: inline-block;width:100%;text-align: left;padding-left: 0.61rem;position: relative;font-size: 0.26rem;;
         .logo{
           width:0.49rem;height:0.49rem;position: absolute;left:0;top:0;
         }
         .right{
           float: right;height:0.18rem;position: absolute;right: 0;top:50%;margin-top: -0.09rem;
         }
       }
     }
   }
  }
</style>
